<template>
    <div class="customerOrder">
        <el-breadcrumb separator="/"  separator-class="el-icon-arrow-right" style="margin-bottom:15px;">
            <el-breadcrumb-item>客户管理</el-breadcrumb-item>
            <el-breadcrumb-item>交易订单</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
			<el-form-item label="城市:">
				<el-select v-model="ruleForm.cityid" placeholder="城市" size="small" class="select" @change="cityChangeHandle" filterable>
					<el-option v-for="(item,index) in cityList" :key="index" :label="item.city" :value="item.cityId">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="楼盘名称:">
				<el-select v-model="ruleForm.devId" placeholder="楼盘名称" size="small" class="select" filterable>
				    <el-option v-for="(item,index) in devList" :key="index" :label="item.devName" :value="item.devId">
				    </el-option>
				</el-select>
			</el-form-item>
            <el-form-item label="客户:">
                <el-input size="small" v-model.trim="ruleForm.customerPhone" placeholder="姓名/手机号/员工号"></el-input>
            </el-form-item>
            <el-form-item label="客户状态:">
                <el-select  v-model="ruleForm.followType" placeholder="客户状态" size="small" class="select" filterable>
                    <el-option label="全部" value=""></el-option>
                    <el-option label="认购" value="3"></el-option>
                    <el-option label="签约" value="4"></el-option>
                    <el-option label="退认购" value="8"></el-option>
                    <el-option label="草签" value="9"></el-option>
                    <el-option label="签约退房" value="11"></el-option>
                    <el-option label="退房" value="13"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单渠道:">
                <el-select v-model="ruleForm.crmFlag" size="small">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="管家端" value="0"></el-option>
                    <el-option label="明源CRM" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-checkbox label="当前佣金套餐为空" v-model="brokeragebool" ></el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchlist" size="small" id="monitorEnter">查询</el-button>
                <el-button @click="resethander" size="small">重置</el-button>
            </el-form-item>
		</el-form>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" width="50" fixed align="center"></el-table-column>
            <el-table-column label="客户姓名" prop="customerName" align="center"></el-table-column>
            <el-table-column label="客户手机号" prop="customerPhone" align="center" :formatter="initcustomerPhone"></el-table-column>
            <el-table-column label="城市" prop="city" align="center"></el-table-column>
            <el-table-column label="楼盘名称" prop="devName" align="center"></el-table-column>
            <el-table-column label="楼盘id" prop="devId" align="center"></el-table-column>
            <el-table-column label="客户当前状态" prop="followType" align="center" :formatter="initfollowType"></el-table-column>

            <el-table-column label="客户状态更新时间" prop="lastestFollowTime" align="center"></el-table-column>
            <el-table-column label="跟进经纪人" prop="brokerName" align="center"></el-table-column>
            <el-table-column label="经纪人类别" prop="brokerType" align="center"></el-table-column>
            <el-table-column label="客户来源" prop="customerSource" align="center"></el-table-column>
            <el-table-column label="订单状态" prop="orderType" align="center"></el-table-column>
            <el-table-column label="当前佣金套餐" prop="brokeragePackageName" align="center"></el-table-column>
            <el-table-column label="订单渠道" prop="crmFlag" align="center" :formatter="initcrmFlag"></el-table-column>
            <el-table-column label="订单信息" width="150" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="$router.push({path:'/cutomerOrderDetail',query:{id:scope.row.id}})">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    :current-page.sync="ruleForm.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="ruleForm.limit"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="totalSize">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import api from "@/api/apiPath"

export default {
    name:"customerOrder",
    title:'交易订单',
    data() {
        return {
        	cityList:[],
        	devList:[],
            tableData:[{}],
        	ruleForm:{
        		cityid:'',
        		devId:'',
                customerPhone:'',
                followType:'',
                crmFlag:'',
                limit:10,
                pageNum: 1,
                brokeragePackage:undefined,//当前佣金套餐 on选择套餐
       		},
            totalSize:0,
            brokeragebool:false,
        }
    },
    created() {
    
    },
    activated(){
        this.searchlist()
    },
    mounted() {
        this.loadCity()//城市
        this.allestate()//全部楼盘
        this.getlist()
    },
    methods: {
        initcustomerPhone(row, column, cellValue, index){
            if (cellValue == undefined) return
            return cellValue.substr(0, 3) + '****' + cellValue.substr(7);
        },
        initcrmFlag(row, column, cellValue, index){
            if (cellValue == undefined) return
            if (cellValue.toString() == '') {
                return ""
            }else if(cellValue.toString() == 0){
                return "管家端"
            }else if(cellValue.toString() == 1){
                return "明源CRM"
            }
        },
        initfollowType(row, column, cellValue, index){
            if (row.crmFlag == 1) {
              if(cellValue == '结佣'){
                return row.customFollowTypeName + '\n' + '来源：明源CRM';
              } else {
                return row.customFollowTypeName;
              }
            } else {
                if(cellValue == '结佣'){
                    return row.followTypeName;
                }else{
                    return cellValue;
                }
            }
        },
        getlist(){
            this.brokeragebool ? this.ruleForm.brokeragePackage = 'on':this.ruleForm.brokeragePackage = undefined
            this.$axios.post('/cms/customer/order/list',this.ruleForm).then(res=>{
                this.tableData = res.list
                this.totalSize = res.total
            })
        },
        handleCurrentChange() {
            this.getlist()
        },
        handleSizeChange(val) {
            this.ruleForm.limit = val
            this.getlist();
        },
        searchlist(){
            this.ruleForm.pageNum = 1
            this.getlist()
        },
        resethander(){
            this.ruleForm.cityId = ''
            this.ruleForm.devId = ''
            this.ruleForm.customerPhone = ''
            this.ruleForm.crmFlag = ''
            this.ruleForm.followType = ''
            this.ruleForm.brokeragePackage= undefined
        },
        cityChangeHandle(){
            this.ruleForm.devId = ''
            this.allestate()
        },
        allestate(){
            this.axios.post(api.ALLESTATEDEVS,{cityId:this.ruleForm.cityid}).then(res=>{
                if (res.data.code == 200) {
                    this.devList = res.data.data
                    this.devList.unshift({devName:'全部',devId:''})
                }
            })
        },
        loadCity(){
            this.axios.post(api.CITYLIST).then(res => {
                if (res.data.code !== 200) {
                    this.$message(res.data.msg)
                }else {
                    this.cityList = res.data.data.cityList
                    this.cityList.unshift({city:'全部',cityId:''})
                }
            })
        },
    }
}
</script>
<style lang="stylus">
    .customerOrder {
        .el-table .cell {
          text-align: center;
          white-space: pre-line;/*保留换行符*/
        }
    }
</style>